<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>携程网</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/mycss.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
 <!-- Demo styles -->
 <style>
    html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 180px;
    }
	.swiper-wrapper{
	  /* 通过改变animation-timing-function 制作弹性切换效果 */
		    transition: 2s cubic-bezier(0.68, -0.4, 0.27, 1.34) 0.2s;
		}
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: pink;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    .swiper-slide img{
        width: 100%;
    }
  </style>

</head>
<body>
<!-- 搜索栏 -->
<div class="search-box">
    <div class="search"><form action="" method="post">
        <input type="search" name="" id="" placeholder="搜索：目的/酒店/景点/航班号">
    </form></div>
    <a href="" class="user"></a>
</div>
<!-- 焦点图 -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="./img/bg.jpg" alt=""></div>
      <div class="swiper-slide"><img src="./img/bg1.jpg" alt=""></div>
      
    
    </div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

 <!-- 局部导航栏 -->
     <ul class="local-nav">
         <li><a href="">景点攻略</a></li>
         <li><a href="">门票活动</a></li>
         <li><a href="">美食林</a></li>
         <li><a href="">周边游</a></li>
         <li><a href="">一日游</a></li>
     </ul>
 <!-- nav  -->
 <nav>
  <div class="nav-common">
      <div class="nav-items"><a href="">酒店</a></div>
      <div class="nav-items"><a href="#">海外酒店</a><a href="">特价酒店</a></div>
      <div class="nav-items"><a href="#">团购</a><a href="#">民宿客栈</a></div>
  </div>
  <div class="nav-common" id="sec">
    <div class="nav-items"><a href="">机票</a></div>
    <div class="nav-items"><a href="#">火车票</a><a href="">特价机票</a></div>
    <div class="nav-items"><a href="#">汽车票*船票</a><a href="#">专车*租车</a></div>
  </div>
  <div class="nav-common">
    <div class="nav-items"><a href="">旅游</a></div>
    <div class="nav-items"><a href="#">门票</a><a href="">目的地攻略</a></div>
    <div class="nav-items"><a href="#">邮轮旅行</a><a href="#">定制旅行</a></div>
  </div>
 </nav>
 <!-- section部分 -->
 <section>
    <ul>
        <li class="li-itmes"><a href="">自由行</a></li>
        <li class="li-itmes"><a href="">wifi电话卡</a></li>
        <li class="li-itmes"><a href="">保险签证</a></li>
        <li class="li-itmes"><a href="">换钞购物</a></li>
        <li class="li-itmes"><a href="">向导包车</a></li>
    </ul>
    <ol>
        <li><a href="">特价机票</a></li>
        <li><a href="">礼品卡</a></li>
        <li><a href="">申卡借钱</a></li>
        <li><a href="">社区</a></li>
        <li><a href="">更多</a></li>
    </ol>
 </section>

 <!-- footer -->
 <footer>
     <div><a href="">联系我们</a></div>
     <div><a href="">下载客户端</a></div>
     <div><a href="">我的</a></div>
 </footer>

 <!-- rights -->
 <div class="rights">
     <p>2021携程旅行|沪ICP备08023580</p>
 </div>

 
  <!-- Swiper JS -->
  <script src="./js/swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
	  speed: 2000,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>
</body>
</html>